
function _contentItemTemplate(list,$el) {
  return     list.map((item,index) => {
    let canvas = document.createElement('canvas')
    let ctx = canvas.getContext('2d')
    canvas.width =   item.width || 500
    canvas.height = item.height || 500
    item.demo(canvas, ctx)
    
    let html = `
    <div class="item shadow-sm p-3 mb-5 bg-white rounded">
            <h3>${item.name}</h3>
    <div class="card">
    <div class="card-body view-demo" >
      <div id="canvas-${index}"/>
    </div>
  </div>
  <div class="accordion" >
    <div class="card">
      <div class="card-header" id="accordionExample-api-${index}">
        <h2 class="mb-0">
          <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne-api-${index}" aria-expanded="true" aria-controls="collapseOne-api-${index}">
            description
          </button>
        </h2>
      </div>
  
      <div id="collapseOne-api-${index}" class="collapse show" aria-labelledby="accordionExample-api-${index}" data-parent="#accordionExample-api-${index}">
        <div class="card-body">
        <pre>
           ${item.description}
           </pre>
        </div>
      </div>
    </div>
 
    <div class="card">
      <div class="card-header" id="headingThree-demo-${index}">
        <h2 class="mb-0">
          <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree-api-${index}" aria-expanded="false" aria-controls="collapseThree-api-${index}">
           code
          </button>
        </h2>
      </div>
      <div id="collapseThree-api-${index}" class="collapse" aria-labelledby="headingThree-demo-${index}" data-parent="#headingThree-demo-${index}">
        <div class="card-body">
         <pre>
           ${item.demo}
         </pre>
        </div>
      </div>
    </div>
  </div>
  </div>
` ;
    $el.append($(html)).find(`#canvas-${index}`).append(canvas)
  }) 
}
function contentTemplate(mainData,$el) {
  _contentItemTemplate(mainData.list,$el)
}


function navTemplate(list) {
  let lis = list.map(itme=>` <li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    ${itme.name}
  </a>
  ${itme.children?`<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
  ${itme.children.map(childItem=>` <a class="dropdown-item" href="#" src="${childItem.src}">${childItem.name}</a>`).join()}
  </div>`:''}
</li>`)
  
  let html = `
  <nav class="navbar   navbar-expand-lg navbar-light shadow p-3 mb-5 bg-white rounded"  >
  <a class="navbar-brand" href="#">Canvas</a>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
     ${lis.join('')}
    </ul>
  </div>
</nav>`
  return html
}